<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" >



    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
学习移动端可以做什么？

1、app
2、小程序   
3、微信公众号      微信商城
4、快应用         apple====16G
5、AR+VR     虚拟现实
6、手机网站




账号：qianduan25
密码：10945389


二倍图
640    二倍图
750    三倍图

pc端的视口：  
     pc端的视口即viewport  就是html   
     pc端的视口即viewport和浏览器的窗口大小是相等的


mobile端的视口：
    1、pc端页面的内容在移动端会被缩放
    2、pc端的视口在移动端有一个默认的尺寸  这个默认尺寸是980px
    3、pc的页面内容是直接显示在视口即viewport或者html上，跟设备大小没有关系


    结构  大小小：    left+left+left
    结构  大小小：    right+left+left



<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

search：
1、获取banner的高渡
2、onscroll事件监听获取滚动的高渡 : scrollTop
3、判断滚动的高渡和banner的高渡
    如果：滚动的高渡 < banner的高渡
var  opacity=滚动的高渡/banner的高渡z
var  banner=document.querySelector(".jd_banner")
var  banner=document.getElementByClassName("")

banner
1、结构的设置
    1、获取对象：banner+ul(imgBox)+li:first-of-type+li:last-of-type
    2、首位添加   
        imgBox.appendChild(li:first-of-type.cloneNode(true))
        imgBox.insertBefore(li:last-of-type.cloneNode(true),li:first-of-type)====insertBefore(插入的对象，插入的位置)

        dom:========
          imgBox.insertBefore(插入的对象，插入的位置)
          imgBox.appendChild(first)
          first.cloneNode(true)
        jquery:=====
          $(插入的对象).insertBefore(插入的位置)
          $(imgBox).append(first)
          $(first).clone()

2、样式的设置
    1、获取所有的li   =====伪数组
    2、得到所有的li的长渡 ====得到li的个数
    3、获取banner的宽渡
    4、计算imgBox的宽渡=banner的宽渡*li的个数
    5、计算每一个li的宽渡   循环======lis[i].style.width=banner的宽渡
    6、显示第二张图片  相当于将imgBox偏移一张图片的宽渡      imgBox.style.left=-banner的宽渡

  onresize   屏幕尺寸发生改变
    3、获取banner的宽渡
    4、计算imgBox的宽渡=banner的宽渡*li的个数
    5、计算每一个li的宽渡   循环======lis[i].style.width=banner的宽渡
    6、显示第二张图片  相当于将imgBox偏移一张图片的宽渡      imgBox.style.left=-banner的宽渡

3、开启定时器
        1、index++
        2、设置过渡效果
        3、设置偏移值   imgBox.style.left=-index*banner的宽渡
        4、判断是否是最后一张
            添加延时器setTimeout
                index==li的个数-1========
                  1、index=1
                  2、清除过渡
                  3、设置偏移值   imgBox.style.left=-index*banner的宽渡

4、touch滑动 ======声明全局变量   startXmoveX+disX   
    1、触发touchstart
        1、清除定时器
        2、获取触摸点的坐标
    2、touchmove
        1、获取手指滑动的坐标
        2、计算滑动的距离disX=moveX-startX
        3、清除过渡
        4、设置ul跟着手指动======imgBox.style.left=-index*banner的宽渡+disX
    3、touchend
        1、判断滑动距离(disX的绝对值)如果超过100
            1、判断方向：  
              disX  >  0   表示从左往右滑动   index--
              disX  <  0   表示从右往左滑动   index++
              设置偏移 imgBox.style.left=-index*banner的宽渡  +   过渡
        2、滑动>0
            设置偏移 imgBox.style.left=-index*banner的宽渡  +   过渡

5、实现无缝滑动    transitionEnd事件
  1、如果  index==0    
      1、index=count-2
      2、清除过渡
      3、设置偏移 imgBox.style.left=-index*banner的宽渡
  2、如果index==count-1
      1.index=1
      2、清除过渡
      3、设置偏移 imgBox.style.left=-index*banner的宽渡

6、解决出现白色间隙
  1、设置节流阀
      1、声明全局变量isEnd=true
      2、在touchmove中判断isEnd是否等于true====等于true就可以接着滑动否则就不能滑动
      3、手指松开touchend中设置  isEnd=false
      4、动画走完后(transitionEnd)在设置isEnd=true
  2、解决可以一直滑动
      手指松开touchend中:初始化startX,moveX,disX

        
======================================================================================    

  touch:
    touches:屏幕上的所有的手指对象
    targetTouches:目标手指对象=======touches
    
    changeTouches:最后手指松开的那一个手指对象

============touch事件的触发条件：必须在移动端+必须要有宽高

</body>
</html>